<template>
    <div>
        <div class="topline"></div>
        <div class="wrapper">
            <ul class="searchList">
                <li v-for="(item,index) of list" :key='index'>
                    <router-link :to="{path:'/details',query:{id:item.id}}">
                        <div class="imgBox">
                            <img :src="item.pic1">
                        </div>
                        <span class="title">{{item.name}}</span>
                        <span class="price">￥{{item.price}}</span>
                    </router-link>
                </li>
            </ul>
            <!-- <div class="pagenation">
                <ul>
                    <li>首页</li>
                    <li>上一页</li>
                    <li v-for="(item,index) in pages" :key='index'>{{item}}</li>
                    <li>下一页</li>
                    <li>尾页</li>
                </ul>
            </div> -->
        </div>
    </div>
</template>


<script>
export default {
  data () {
    return {
      currentPage: 1,
      total      : '',
      per        : 12,
      pages      : 10,
      list       : this.searchResult,
    }
  },
  props:['searchResult'],
  methods: {

  },
  beforeMount() {
    // console.log(this.list)
  },
}
</script>


<style lang="scss" scoped>
    @mixin clearfix() {
        &::after {
            display: block;
            clear  : both;
            content: '';
        }
    }
    @mixin wrapperStyle{
        width    : 12rem;
        margin   : 0 auto;
        position : relative;
        font-size: 0.16rem;
        @include clearfix();
        a{
            color: #666
        }
        ul{
            margin-bottom       : 0.4rem;
            padding-inline-start: 0;
        }
        li{
            list-style: none
        }
    }
    .wrapper{
        @include wrapperStyle();
        .searchList{
            display  : flex;
            flex-wrap: wrap;
            li{
                margin-bottom: 0.18rem;
                &:not(:nth-of-type(4n+0)){
                    margin-right: 0.2rem
                }
                a{
                    display       : flex;
                    flex-direction: column;
                }
            }
            .imgBox{
                width   : 2.85rem;
                height  : 2.85rem;
                overflow: hidden;
                img{
                    width     : 100%;
                    height    : 100%;
                    transition: all 0.5s;
                    &:hover{
                        transform: scale(1.1,1.1);
                    }
                }
            }
            span{
                width     : 100%;
                text-align: center
            }
            .title{
                margin-top: 0.25rem
            }
        }
    }
    .topline{
        width        : 100%;
        height       : 0.52rem;
        border-bottom: 0.01rem rgba(235,235,235,1) solid;
        margin-bottom: 0.2rem;
    }

</style>
